<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="60%"
    top="8vh"
    append-to-body
  >
    <div class="wp-enlargeImage__image">
      <img
        :src="url"
        alt
        class="img"
        :style="{ transform: 'scale(' + multiples + ')' }"
      />
    </div>
    <div class="wp-enlargeImage__btn">
      <el-button @click="toBIgChange" icon="el-icon-zoom-in">放 大</el-button>
      <el-button @click="toSmallChange" icon="el-icon-zoom-out">缩小</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    multiples: {type: Number,
      default: () => {
        return 1.8
      }}
  },
  data () {
    return {
      visible: false,
      url: '',
      title: ''
      // multiples: this.defaultMultiples
    }
  },
  methods: {
    show (url, title) {
      this.visible = true
      this.url = url
      this.title = title
    },
    toBIgChange () {
      if (this.multiples >= 3) {
        return
      }
      this.multiples += 0.25
    },
    // 缩小
    toSmallChange () {
      if (this.multiples <= 1) {
        return
      }
      this.multiples -= 0.25
    }
  }
}
</script>
<style lang="scss" scoped>
%flex-Box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.wp-enlargeImage {
  &__image {
    @extend %flex-Box;
    overflow-x: auto;
    min-height: 350px;
    overflow-y: auto;
  }
  &__btn {
    @extend %flex-Box;
    margin-top: 20px;
  }
}
.img {
  width: 200px;
}
</style>
